<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ChatGPT Token</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <style>
        textarea[readonly] {
            background-color: #f0f0f0; /* 灰色背景 */
            color: #6c757d; /* 灰色文字 */
            border-color: #ced4da; /* 灰色边框 */
            cursor: not-allowed; /* 光标显示为不可操作 */
        }
    </style>
</head>
<body>
<div style="display: flex; flex-direction: column">

    <div style="margin: 12px 20px">
        {% if avatar_url %}
        <a href="https://github.com/dairoot/ChatGPT-Mirror" target="_blank" style="float: right">
            <img style="float: right;   border-radius: 50%;" height="35;" src="{{ avatar_url }}"></img>
        </a>
        {% endif %}
    </div>

    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5>获取 ChatGPT Token</h5>
                    </div>
                    <div class="card-body">
                        <form id="tokenForm">
                            <div class="form-group">
                                <label for="username">用户名</label>
                                <input type="text" class="form-control" id="username" name="username" required>
                            </div>
                            <div class="form-group">
                                <label for="password">密码</label>
                                <input type="password" class="form-control" id="password" name="password" required>
                            </div>

                            <div class="form-group">
                                <label class="btn">
                                    <input type="radio" name="token_type" value="session_token" checked> Session Token
                                </label>
                                <label class="btn">
                                    <input type="radio" disabled name="token_type" value="refresh_token"> Refresh Token
                                </label>
                            </div>
                            <button id="submitButton" type="submit" class="btn btn-primary">获取 Token</button>
                        </form>
                        <div id="response" class="mt-3"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入 Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function () {

        $('#tokenForm').on('submit', function (event) {
            event.preventDefault();
            const token_type = $('input[name="token_type"]:checked').val();
            console.log("token_type", token_type)
            url = token_type === 'session_token' ? '/get-session-token' : '/get-refresh-token'
            console.log('url', url)

            var formData = {
                username: $('#username').val(),
                password: $('#password').val(),
            };

            $('#response').html("正在查询中，请稍候...");
            $('#submitButton').attr("disabled", true);
            $.ajax({
                type: 'POST',
                url: url,
                data: JSON.stringify(formData),
                contentType: 'application/json',
                success: function (response) {
                    var rt_html = '<div style="display: flex; align-items: center;"><h5>Refresh-Token</h5> ' +
                        '<span id="rtSpan" style="margin-left: 8px;font-size: 12px;">点击文本框复制</span></div>' +
                        '<textarea id="rtTextarea" style="width: 100%; height: 150px; font-size: 14px;" readonly>' + response.refresh_token + '</textarea>'


                    var st_html = '<div style="display: flex; align-items: center;"><h5>Session-Token</h5> ' +
                        '<span id="stSpan" style="margin-left: 8px;font-size: 12px;">点击文本框复制</span></div>' +
                        '<textarea id="stTextarea" style="width: 100%; height: 150px; font-size: 14px;" readonly>' + response.session_token + '</textarea>'

                    var at_html = '<div style="display: flex; align-items: center;"><h5> Access-Token</h5>' +
                        '<span id="atSpan" style="margin-left: 8px;font-size: 12px;">点击文本框复制</span></div>' +
                        '<textarea id="atTextarea" style="width: 100%; height: 150px; font-size: 14px;" readonly>' + response.access_token + '</textarea>'

                    token_html = ''
                    if (response.refresh_token) {
                        token_html += rt_html
                    }
                    if (response.session_token) {
                        token_html += st_html
                    }
                    if (response.access_token) {
                        token_html += at_html
                    }

                    $('#response').html('<div class="alert alert-success">查询成功 (记录缓存10分钟)</div>' + token_html);
                    $('#tokenForm').hide()

                    $('#rtTextarea').on('click', function () {
                        var textarea = $(this).get(0);
                        textarea.select();
                        textarea.setSelectionRange(0, 99999); // 对于移动设备
                        document.execCommand('copy');
                        $('#rtSpan').css('color', 'green').text('已复制！');
                        $('#atSpan').css('color', 'black').text('点击文本框复制');
                        $('#stSpan').css('color', 'black').text('点击文本框复制');
                    });

                    $('#stTextarea').on('click', function () {
                        var textarea = $(this).get(0);
                        textarea.select();
                        textarea.setSelectionRange(0, 99999); // 对于移动设备
                        document.execCommand('copy');
                        $('#stSpan').css('color', 'green').text('已复制！');
                        $('#atSpan').css('color', 'black').text('点击文本框复制');
                        $('#rtSpan').css('color', 'black').text('点击文本框复制');
                    });

                    $('#atTextarea').on('click', function () {
                        var textarea = $(this).get(0);
                        textarea.select();
                        textarea.setSelectionRange(0, 99999); // 对于移动设备
                        document.execCommand('copy');
                        $('#atSpan').css('color', 'green').text('已复制！');
                        $('#stSpan').css('color', 'black').text('点击文本框复制');
                        $('#rtSpan').css('color', 'black').text('点击文本框复制');

                    });

                    $('#submitButton').attr("disabled", false);


                },
                error: function (error) {
                    if (error.status === 401) {
                        setTimeout(function () {
                            window.location.href = "/login";
                        }, 1000);
                    }
                    $('#submitButton').attr("disabled", false);
                    msg = error.responseJSON && error.responseJSON.msg || ''
                    $('#response').html('<div class="alert alert-danger"> stauts: ' + error.status + ', msg: ' + msg + '</div>');
                }

            });


        });
    });


</script>
</body>
</html>